<template>
  <div class="login-page">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="item" style="
    font-size: 28px; 
    font-weight: 700; 
    color: #4A90E2; 
    text-align: center; 
    padding: 20px 0; 
    border-radius: 10px; 
    cursor: pointer;
    transition: all 0.3s ease;">
          Create an Account
        </div>

      </div>
      <div class="login-form">
        <el-form :model="form" :rules="registerRules" ref="register" v-loading="loading">
          <el-form-item prop="studentId">
            <el-input type="text" v-model="form.studentId" auto-complete="off" placeholder="请输入学号">
              <template slot="prepend"><i style="font-size:20px" class="el-icon-document"></i></template>
            </el-input>
          </el-form-item>
          <el-form-item prop="school">
            <el-input type="text" v-model="form.school" auto-complete="off" placeholder="请输入学校">
              <template slot="prepend"><i style="font-size:20px" class="el-icon-school"></i></template>
            </el-input>
          </el-form-item>


          <el-form-item prop="username">
            <el-input type="text" v-model="form.username" auto-complete="off" placeholder="请输入用户名" size="default">
              <template #prepend>
                <i class="el-icon-user-solid" style="font-size:20px;"></i>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item prop="password">
            <el-input type="text" v-model="form.password" auto-complete="off" placeholder="请输入密码" show-password>
              <template slot="prepend"><i style="font-size:20px" class="el-icon-key"></i></template>
            </el-input>
          </el-form-item>
          <el-form-item prop="confirmPassword">
            <el-input type="text" v-model="form.confirmPassword" auto-complete="off" placeholder="请输入确认密码"
              show-password>
              <template slot="prepend"><i style="font-size:20px" class="el-icon-key"></i></template>
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-button style="width:100%;" type="primary" @click="register('register')"
              :loading="loading">注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>


import API from "@/api/request";


export default {
  name: 'register',
  data() {
    return {
      loading: false,
      form: {
        username: '',
        password: '',
        studentId: '',
        confirmPassword: '',
        school: '',
      },
      schoolOptions: [], // 学校集合
      registerRules: {
        studentId: [
          { required: true, message: '请输入学号', trigger: 'blur' },
        ],
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '请输入确认密码', trigger: 'blur' }
        ],
        school: [
          { required: true, message: '请输入学校', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    register(register) {
      this.$refs[register].validate((valid) => {
        if (valid) {


          // 检查表单项
          if (!this.form.username) {
            this.$message({
              type: "error",
              message: "请输入用户名",
              duration: 1000
            })
            return
          }
          if (!this.form.studentId) {
            this.$message({
              type: "error",
              message: "请输入学号",
              duration: 1000
            })
            return
          }
          if (!this.form.password) {
            this.$message({
              type: "error",
              message: "请输入密码",
              duration: 1000
            })
            return
          }
          if (!this.form.confirmPassword) {
            this.$message({
              type: "error",
              message: "请确认密码",
              duration: 1000
            })
            return
          }
          if (!this.form.school) {
            this.$message({
              type: "error",
              message: "请输入学校",
              duration: 1000
            })
            return
          }
          if (this.form.password !== this.form.confirmPassword) {
            this.$message({
              type: "error",
              message: "密码输入不一致",
              duration: 1000
            })
            return
          }
          API.post('/api/user/register', this.form, {
            headers: {
              'Content-Type': 'application/json'
            }
          }).then(res => {
            const result = res;
            if (result.data.code === 200) {
              this.$message({
                type: "success",
                message: "注册成功！",
                duration: 1000
              })
              //跳转登录页
              this.$router.replace('/login');
            } else {
              this.$message({
                type: "error",
                message: result.data.message,
                duration: 1000
              })
            }

          }).catch(error => {
            this.$message({
              type: "error",
              message: error,
              duration: 1000
            })
          })


        }
      });
    },


  },

}

</script>

<style scoped>
.login-page {
  background-image: linear-gradient(135deg, #A1D1E6 0%, #7BD1B5 100%);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-title {
  font-size: 20px;
}

.box-card {
  width: 375px;
}

.item {
  text-align: center;
  padding: 8px 0
}

.el-select,
.el-input {
  width: 100%;
  height: 40px;
  /* 调整高度，使其一致 */
}

.el-select .el-input__inner,
.el-input .el-input__inner {
  padding-left: 30px;
  /* 保证图标和文本间距一致 */
}
</style>